<template>
  <div class="energy">
    <ListTab
      v-model="tabStatus"
      :show-header="!showMobilePage"
      :tabs="tabs"
      :max-badge="{ num: 10000, str: '1w', unit: '+' }"
      :mode="orderMode"
      :mode-list="modeList"
      is-table
      @tabClick="handleTabClick" />
    <LinkList v-show="orderMode === 0 && currentTab !== -2" ref="linkListRef" @getTabs="getTabs" />
    <imageList v-if="orderMode === 0 && currentTab === -2"/>
    <ReportList v-else-if="orderMode === 1" />
  </div>
</template>
<script>
import ListTab from '@/components/ListTab';
import LinkList from './module/linkList';
import imageList from './module/imageList';
import ReportList from './module/reportList';
import mobileTable from '@/mixins/mobileTable';

export default {
  components: {
    ListTab,
    LinkList,
    imageList,
    ReportList
  },
  mixins: [mobileTable],
  data() {
    return {
      tabs: [],
      tabStatus: -1,
      publishUrl: '',
      orderMode: 0,
      currentTab: ''
    };
  },
  computed: {
    modeList() {
      return [
        { mode: 0, name: '链接', handleClick: this.changeOrderMode },
        { mode: 1, name: '报告', handleClick: this.changeOrderMode }
      ];
    }
  },
  beforeRouteEnter(to, from, next) {
    const fromNames = ['publishDetail'];
    if (fromNames.includes(from.name)) {
      to.meta.isDetail = true;
    } else {
      to.meta.isDetail = false;
    }
    next();
  },
  activated() {
    if (this.$route.meta.isDetail) {
      this.changeOrderMode(1);
    }
    if (this.$route.query.tab) {
      this.tabStatus = Number(this.$route.query.tab);
      this.currentTab = Number(this.$route.query.tab);
      this.$nextTick(() => {
        this.$router.replace({
          name: 'publish'
        });
      });
    }
  },
  methods: {
    getTabs(val) {
      this.tabs = val;
    },
    changeOrderMode(val) {
      this.orderMode = val;
      if (val) {
        this.tabs = [];
        this.currentTab = -1;
      } else {
        this.$refs['linkListRef'].getTabs();
        this.currentTab = -1;
        this.tabStatus = -1;
      }
    },
    handleTabClick(id) {
      this.currentTab = id;
      if (this.tab === -2) return;
      this.$refs.linkListRef.handleTabClick(id);
    }
  }
};
</script>
<style lang="scss" scoped>
.energy {
  .energy-list {
    margin: 16px 16px 0 16px;
    background-color: #fff;
    padding: 20px 24px 55px 24px;
  }
}
</style>
<style lang="scss">
.publish-err-message-box {
  .el-message-box__btns {
    display: flex;
    justify-content: center;
    flex-flow: row-reverse;
    .el-button--small {
      width: auto !important;
      margin-left: 0px;
    }
    .btn-custom-cancel {
      margin-left: 10px;
    }
  }
}
.charge-mobile {
  width: 100% !important;
}
</style>
